<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>qq延时提示符</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.page{width:1360px;height:768px;background:url(image/bg.png) no-repeat;margin:0 auto; position:relative;}
.right{width:306px;height:530px;background:url(image/qq.png) no-repeat;position:absolute;right:15px;top:20px;}
#head{width:50px;height:50px;background:url(image/link.png) 0 -50px no-repeat;float:left;margin:265px 0 0 7px;}
a#head:hover{ background-position: 0px 1px;}
#left{width:279px;height:334px;background:url(image/prompt.png) no-repeat;position:absolute;top:250px;left:-282px;display:none;}
</style>
<script type="text/javascript">


</script>
</head>
<body>
	<div class="page">
		<div class="right">
			<a href="###" id="head"></a>
			<div id="left"></div>
		</div>
	</div>
</body>
	<script>
		var _head = document.getElementById("head");
		var info = document.getElementById("left");
		
		_head.onmouseover = function(){
			clearTimeout(_head.t);
			info.style.display = "block";
		}
		_head.onmouseout = function(){
			this.t = setTimeout(function(){
				info.style.display = "none";
			},500);
		}
		info.onmouseover = function(){
			clearTimeout(_head.t);
		}
		info.onmouseout = function(){
			this.style.display = "none";
		}
	</script>
</html>
